<template>
  <!-- 动态 -->
  <view class="container">
    <view v-for="item in list" :key="item.id">
      <view class="post">
        <view class="post-header">
          <!-- 头像 -->
          <image :src="item.user.avatar" class="avatar"></image>
          <!-- 个人信息 -->
          <view class="user-info">
            <view class="user-header">
              <text class="user-name">{{ item.user.name }}</text>
              <image
                :src="
                  item.user.gender == '0' ? '/static/images/female.png' : '/static/images/male.png'
                "
                class="gender-icon"
              ></image>
            </view>
            <text class="user-details"
              >{{ item.user.location }} · {{ item.user.age }}岁 · {{ item.user.height }}cm ·
              {{ item.user.education }}</text
            >
          </view>
        </view>
        <view class="post-content">
          <view class="post-text">
            <text>{{ item.content }}</text>
          </view>

          <image src="/static/images/post.png" mode="widthFix" class="post-image"></image>
        </view>

        <view class="post-footer">
          <!-- 点赞 -->
          <view class="inter-like" style="border: 1.5px solid #ef8474">
            <image
              :src="flagthumb == '0' ? '/static/Meet/isthumb.png' : '/static/Meet/thumb.png'"
              class="thumb-icon"
              @click="thumb"
            ></image>
            <text>点赞</text>
          </view>

          <!-- 喜欢 -->
          <view class="inter-like" @click="checkToken(like)" style="border: 1.5px solid #ea6389">
            <image
              :src="flaglike == '0' ? '/static/Meet/like.png' : '/static/Meet/islike.png'"
              class="like-icon"
            >
            </image>
            <text>喜欢</text>
          </view>
          <!-- 送礼 -->
          <view class="inter-like" style="border: 1.5px solid #f0b74c">
            <image
              src="/static/Meet/gift.png"
              class="thumb-icon"
              style="margin-left: 15rpx"
              @click="showPopup"
            />
            <text>礼物</text>
          </view>
        </view>
      </view>
    </view>

    <uni-popup ref="popup" type="bottom">
      <view class="popup-content">
        <view class="gift" v-for="(gift, index) in gifts" :key="index">
          <image :src="gift.image" class="thumb-icon" />
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import type { UniPopup } from '@uni-helper/uni-ui-types/index'
import { ref, defineProps, onMounted, watch } from 'vue'

const active = ref(0)
const flaglike = ref('0')
const flagthumb = ref('0')

const list = [
  {
    id: 1,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 3,
    user: {
      name: '14343333333',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
  {
    id: 2,
    user: {
      name: '清清',
      avatar: '/static/images/new.png',
      genderIcon: '/images/female.png',
      gender: '0',
      location: '绵阳',
      age: 31,
      height: 160,
      education: '本科',
    },
    content: '上传了个人相册',
    image: '/static/images/new.png',
    date: '2021-09-08',
    likes: 6,
  },
]

const checkToken = (func: any) => {
  const token = uni.getStorageSync('token')
  if (!token) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
    })
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/login',
      })
    }, 1500)
  } else {
    func()
  }
}

const like = () => {
  flaglike.value = flaglike.value == '0' ? '1' : '0'
}

const thumb = () => {
  flagthumb.value = flagthumb.value == '0' ? '1' : '0'
}

onMounted(() => {
  // 监听全局事件并直接接收值
  uni.$on('active0', (msg) => {
    active.value = msg
    console.log(msg)
  })
})

onMounted(() => {
  // 监听全局事件并直接接收值
  uni.$on('active1', (msg) => {
    active.value = msg
    console.log(msg)
  })
})

watch(active, (newValue, oldValue) => {
  console.log('active changed from', oldValue, 'to', newValue)
})
// 展示礼物

const popup = ref<UniPopup | null>(null)
// const gifts = ref(['Gift 1', 'Gift 2', 'Gift 3', 'Gift 4']);
const gifts = ref([
  { name: 'rose', image: '/static/Meet/rose.png' },
  { name: 'chocolate', image: '/static/Meet/chocolate.png' },
  { name: 'ring', image: '/static/Meet/ring.png' },
  { name: 'ferriswheel', image: '/static/Meet/ferriswheel.png' },
])

const showGifts = () => {
  ;(popup.value as UniPopup).open()
}
const showPopup = () => {
  ;(popup.value as UniPopup).open()
}
</script>

<style scoped>
/* 头部 */

/* 动态 */
.container {
  margin-top: 60rpx;
  /* padding: 10px; */
  width: 100%;
}

.post {
  padding: 20px 10px;
  margin-bottom: 10px;
  border-radius: 20px;
  border: 1px solid #f1ebeb;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
}

.post-header {
  display: flex;
  align-items: start;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 10px;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-header {
  display: flex;
  align-items: center;
}

.user-name {
  font-weight: bold;
}

.gender-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 5px;
}

.like-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 5px;
}

.user-details {
  color: #888;
  font-size: 12px;
}

.post-content {
  margin-left: 60rpx;
  margin-top: 10rpx;
}

.post-content image {
  margin-top: 10px;
  width: 90%;
  border-radius: 15px;
}

.post-text {
  margin-top: 15px;
}

.post-footer {
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  margin-left: 22px;
}

.thumb-icon {
  width: 40rpx;
  height: 40rpx;
}

.inter-like {
  padding: 10rpx;
  width: 150rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid rgb(186, 181, 181);
}

/* 返回顶部 */
.back-to-top-icon {
  position: fixed;
  bottom: 50rpx;
  right: 20rpx;
  width: 70rpx;
  height: 70rpx;
}

/* 发布按钮 */
.send {
  position: fixed;
  bottom: 50rpx;
  left: calc(100vw - 50vw);
  width: 70rpx;
  height: 70rpx;
}

.popup-content {
  width: 100%;
  padding: 10px 50px;
  background-color: rgb(244, 240, 240);
  display: inline-flex;
  justify-content: space-around;
  border: #d6cfcf solid 1px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
